<template>
  <div :style="{ width: '100%', height: '100%' }" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
const option = {
  legend: {
    show: false,
  },
  grid: {
    top: '0%',
  },
  series: [
    {
      top: '0%',
      name: '系统积分',
      type: 'pie',
      radius: ['40%', '60%'],
      color: ['#2672FFFF', '#18E1B8FF'],
      label: {
        show: true,
        formatter: function (params) {
          console.log(params, 'params')
          if (params.name === '消费积分及占比') {
            return `{name|${params.name}: } {value|${params.value}}  {ratio|(${params.data.ratio})}`
          }
          return `{name|${params.name}: } {value|${params.value}}`
        },
        rich: {
          value: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#fff',
          },
          name: {
            fontSize: 14,
            color: '#fff',
          },
          ratio: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#fff',
          },
        },
      },
      data: [
        { value: 100, name: '消费积分及占比', ratio: 0 },
        { value: 1000, name: '系统总积分' },
      ],
    },
  ],
}
export default {
  name: 'SystemPoints',
  data() {
    return {
      chartInstance: null,
    }
  },
  methods: {
    init(data) {
      this.chartInstance = echarts.init(this.$refs.chart)
      option.series[0]['data'][0]['value'] = data.consumptionRuleSettings * -1
      option.series[0]['data'][0]['ratio'] =
        ((data.consumptionRuleSettings * -1) / data.xtRuleSettings).toFixed(2) *
          100 +
        '%'

      option.series[0]['data'][1]['value'] = data.xtRuleSettings
      console.log(option, 'option')

      this.chartInstance.setOption(option)
      this.chartInstance.resize()
    },
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.chartInstance.setOption(option)
      this.chartInstance.resize()
    })
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose()
    }
  },
}
</script>
